<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css" href="/static/login/css/login.css" />
	<script src="/static/login/js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<title>优品-欢迎登陆</title>
	<link rel="icon" href="/static/login/img/favicon.ico">
</head>

<body>
	<!--顶部logo-->
	<header>
		<a href="http://yomall.com"><img src="/static/login/img/logo.png" /></a>
		<p>欢迎登录</p>
		<div class="top-1">
			<img src="/static/login/img/4de5019d2404d347897dee637895d02b_06.png" />
			<span>登录页面,调查问卷</span>
		</div>
	</header>

	<div class="top-2">
		<div class="top-2a">
			<p>
				<img src="/static/login/img/4de5019d2404d347897dee637895d02b_11.png" />
				<i></i>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《<span>优品隐私政策</span>》已上线，将更有利于保护您的个人隐私。
			</p>
		</div>
	</div>

	<!--大图-->
	<div class="top-3">
		<div class="img_1">
			<img src="/static/login/img/ad26336a0976c7e8.jpg" />
		</div>
		<div id="sign">
			<div class="si_top">
				<p>
					<span>优品不会以任何理由要求您转账汇款，谨防诈骗。</span>
				</p>
			</div>
			<div class="si_cen">
				<h2 class="act btn1">扫码登录</h2>
				<span>|</span>
				<h2 class="btn1">账户登录</h2>
			</div>
			<div class="si_bom tab">
				<img src="/static/login/img/show.png" class="bom_1" />
				<a href="#"><img src="/static/login/img/phone-orange.png" class="bom_2" /></a>
				<h6>打开<span class="red">手机优品</span> 扫描二维码</h6>
				<p>
					<img src="/static/login/img/4de5019d2404d347897dee637895d02b_15.png" />
					<span><a href="#">免输入</a></span>
					<img src="/static/login/img/4de5019d2404d347897dee637895d02b_17.png" />
					<span><a href="#">更快</a></span>
					<img src="/static/login/img/4de5019d2404d347897dee637895d02b_19.png" />
					<span><a href="#">更安全</a></span>
				</p>
			</div>
			<div class="si_bom1 tab" style="display: none;">
				<form action="/ssoLogin" method="post">
					<input type="hidden" name="returnUrl" th:value="${returnUrl}">
					<ul>
						<li class="top_1">
							<img src="/static/login/img/user_03.png" class="err_img1" />
							<input name="account" type="text" placeholder=" 邮箱/用户名/已验证手机" class="user" />
						</li>
						<li>
							<img src="/static/login/img/user_06.png" class="err_img2" />
							<input name="password" type="password" placeholder=" 密码" class="password" />
						</li>
						<li class="bri">
							<span style="color:red;"
								  th:text="${errors!=null?(#maps.containsKey(errors, 'msg')?errors.msg:''):''}"></span>
							<a href="">忘记密码</a>
						</li>
						<li class="ent"><button type="submit" class="btn2">登 &nbsp; &nbsp;录</button></li>
					</ul>
				</form>
			</div>
			<div class="si_out">
				<ul>
					<li>
						<a href="https://api.weibo.com/oauth2/authorize?client_id=767355573&response_type=code&redirect_uri=http://auth.yomall.com/oauth/weibo/success" title="微博登录">
							<svg class="Zi Zi--Weibo Login-socialIcon" fill="#fb6622" viewBox="0 0 24 24" width="20" height="20">
								<path fill="#FB6622" d="M15.518 3.06c8.834-.854 7.395 7.732 7.394 7.731-.625 1.439-1.673.309-1.673.309.596-7.519-5.692-6.329-5.692-6.329-.898-1.067-.029-1.711-.029-1.711zm4.131 6.985c-.661 1.01-1.377.126-1.376.126.205-3.179-2.396-2.598-2.396-2.598-.719-.765-.091-1.346-.091-1.346 4.882-.551 3.863 3.818 3.863 3.818zM5.317 7.519s4.615-3.86 6.443-1.328c0 0 .662 1.08-.111 2.797.003-.003 3.723-1.96 5.408.159 0 0 .848 1.095-.191 2.649 0 0 2.918-.099 2.918 2.715 0 2.811-4.104 6.44-9.315 6.44-5.214 0-8.026-2.092-8.596-3.102 0 0-3.475-4.495 3.444-10.33zm10.448 7.792s.232-4.411-5.71-4.207c-6.652.231-6.579 4.654-6.579 4.654.021.39.097 3.713 5.842 3.713 5.98 0 6.447-4.16 6.447-4.16zm-9.882.86s-.059-3.632 3.804-3.561c3.412.06 3.206 3.165 3.206 3.165s-.026 2.979-3.684 2.979c-3.288 0-3.326-2.583-3.326-2.583zm2.528 1.037c.672 0 1.212-.447 1.212-.998 0-.551-.543-.998-1.212-.998-.672 0-1.215.447-1.215.998 0 .551.546.998 1.215.998z" fill-rule="evenodd"></path>
							</svg>
							<span>微博</span>
						</a>
					</li>
					<li class="f4">|</li>
					<li>
						<a href="#" title="QQ登录">
							<svg class="Zi Zi--QQ Login-socialIcon" fill="#50c8fd" viewBox="0 0 24 24" width="20" height="20">
								<path d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.484 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.287.687 6.287 0 0-.688-1.768-1.182-1.768-1.182 2.085-1.77 1.905-3.967 1.905-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.166-6.954-2.166-6.954V9.325C18.29 3.364 14.268 2 12.003 2z" fill-rule="evenodd"></path>
							</svg>
							<span>QQ</span>
						</a>
					</li>
					<li class="f4">|</li>
					<li>
						<a href="#" title="微信登录">
							<svg class="Zi Zi--WeChat Login-socialIcon" fill="#60c84d" viewBox="0 0 24 24" width="20" height="20">
								<path d="M2.224 21.667s4.24-1.825 4.788-2.056C15.029 23.141 22 17.714 22 11.898 22 6.984 17.523 3 12 3S2 6.984 2 11.898c0 1.86.64 3.585 1.737 5.013-.274.833-1.513 4.756-1.513 4.756zm5.943-9.707c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272zm7.583 0c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272z" fill-rule="evenodd"></path>
							</svg>
							<span>微信</span>
						</a>
					</li>
				</ul>
				<h5 class="rig">
					<img src="/static/login/img/4de5019d2404d347897dee637895d02b_25.png" />
					<span><a href="http://auth.yomall.com/reg.html">立即注册</a></span>
				</h5>
			</div>
		</div>
	</div>

	<!--底部-->
	<footer>
		<ul>
			<li><a href="#">关于我们</a></li>
			<li class="little">|</li>
			<li><a href="#">联系我们</a></li>
			<li class="little">|</li>
			<li><a href="#">人才招聘</a></li>
			<li class="little">|</li>
			<li><a href="#">商家入驻</a></li>
			<li class="little">|</li>
			<li><a href="#">广告服务</a></li>
			<li class="little">|</li>
			<li><a href="#">手机优品</a></li>
			<li class="little">|</li>
			<li><a href="#">友情链接</a></li>
			<li class="little">|</li>
			<li><a href="#">销售联盟</a></li>
			<li class="little">|</li>
			<li><a href="#">优品社区</a></li>
			<li class="little">|</li>
			<li><a href="#">优品公益</a></li>
			<li class="little">|</li>
			<li><a href="#">English Site</a></li>
		</ul>
		<span>Copyright &copy; 2020-2021 优品yomall.com 版权所有</span>
	</footer>

</body>
<script type="text/javascript">
	var alDiv = document.getElementsByClassName('tab');
	var alBtn = document.getElementsByTagName('h2');
	alDiv[0].style.display = 'block';
	var act = alBtn[0]
	for (var i = 0; i < alBtn.length; i++) {
		alBtn[i].indent = i;
		alBtn[i].onclick = function () {
			act.className = '';
			alDiv[act.indent].style.display = 'none';
			this.className = 'act'
			alDiv[this.indent].style.display = 'block'
			act = this
		}
	}

	var btn2 = document.getElementsByClassName('btn2')[0];
	var user = document.getElementsByClassName('user')[0];
	var pass = document.getElementsByClassName('password')[0];
	var err = document.getElementsByClassName('error')[0];
	var err_img1 = document.getElementsByClassName('err_img1')[0];
	var err_img2 = document.getElementsByClassName('err_img2')[0];

	btn2.onclick = function () {
		if (user.value == '' || pass.value == '') {
			err.style.display = 'block';
			user.style.border = '1px solid red';
			pass.style.border = '1px solid red';
			err_img1.src = 'img/img11.png';
			err_img2.src = 'img/img22.png';
		} else {
			var a = document.getElementsByClassName("a")[0].href = "http://www.baidu.com";
		}
		user.onfocus = function () {
			err_img1.src = 'img/grow1.png';
			user.style.border = '1px solid #999';
		}
		pass.onfocus = function () {
			err_img2.src = 'img/grow2.png';
			pass.style.border = '1px solid #999';
		}
		user.onblur = function () {
			err_img1.src = 'img/img11.png';
			user.style.border = '1px solid red';
		}
		pass.onblur = function () {
			err_img2.src = 'img/img22.png';
			pass.style.border = '1px solid red';
		}
	}
</script>

</html>